<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>任务1</title>
    <style>
      #main {
        max-width: 1200px;
        text-align: center;
      }
      /* @media (max-width: 500px) {
        #main {
          max-width: 450px;
        }
      } */
      #image {
        max-width: 100%;
        height: auto;
        /*  */
        margin: 0 auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <main id="main">
      <h1 id="title">Dr. Norman Borlaug</h1>
      <figure id="img-div">
        <img
          id="image"
          src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"
        />
        <figcaption id="img-caption">
          The man who saved a billion lives
        </figcaption>
        <section id="tribute-info">
          <h3>Here's a time line of Dr. Borlaug's life:</h3>
          <ul>
            <li>1914 - Born in Cresco, Iowa</li>
          </ul>
        </section>
        <a
          href="https://fanyi.baidu.com/#en/zh/"
          id="tribute-link"
          target="_blank"
          >百度翻译</a
        >
      </figure>
    </main>
  </body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
